// 引入 html-webpack-plugin 插件 用来打包html
let HtmlWebpackPlugin = require("html-webpack-plugin");

// 配置插件
let htmlPlugin = new HtmlWebpackPlugin({
    // 打包模板
    template:"./public/index.html",
    // 打包后文件名称
    filename:"index.html"
})
module.exports ={
    // mode 模式
    mode:"development",
    // entry 入口
    entry:"./src/index.js",
    //output 出口
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    module:{
        // 匹配规则
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            } 
        ]
    },
    // 插件
    plugins:[
        // 注册插件
        htmlPlugin,
    ],
    // 搭建开发环境
    devServer:{
        // 端口号
        port:9000,
        //服务启动后是否打开默认浏览器
        open:false,
        client:{
            overlay:false
        }
    }
}